<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<script type="text/javascript" src="../jquery-1.6.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<style type="text/css">
		.drag-item{
			list-style-type:none;
			display:block;
			padding:5px;
			border-bottom:1px solid #ccc;
			margin:2px;
			width:300px;
			background:#fafafa;
		}
		.indicator{
			position:absolute;
			font-size:9px;
			width:10px;
			height:10px;
			display:none;
			color:red;
		}
        .highlight{
            background: red;
        }
	</style>
	<script>
		$(function(){
			var indicator = $('<div class="indicator">>></div>').appendTo('body');
			$('.drag-item').draggable({
				revert:true,
				deltaX:0,
				deltaY:0
			}).droppable({
				onDragOver:function(e,source){
                    $(this).addClass("highlight"),
					indicator.css({
						display:'block',
						top:$(this).offset().top+$(this).outerHeight()-5
					});
				},
				onDragLeave:function(e,source){
                    $(this).removeClass("highlight");
					indicator.hide();
				},
				onDrop:function(e,source){
                     $(this).removeClass("highlight");
                    //alert($(source).attr('id'));
                    //alert($(this).attr("id"));
					$(source).insertAfter(this);
					indicator.hide();
				}
			});
		});
	</script>
</head>
<body>
	<h1>DragDrop</h1>
	<ul style="margin:0;padding:0;margin-left:10px;">
		<li class="drag-item" id="Switch01">Switch01</li>
		<li class="drag-item" id="Server01">Server01</li>
		<li class="drag-item" id="Server02">Server02</li>
		<li class="drag-item" id="Server03">Server03</li>
		<li class="drag-item" id="Server04">Server04</li>
		<li class="drag-item" id="Server05">Server05</li>
		<li class="drag-item" id="Server06">Server06</li>
	</ul>
	<br />
	<br />
	<br />
	<br />
	<ul style="margin:0;padding:0;margin-left:10px;">
		<li class="drag-item" id="Switch01">Switch01</li>
		<li class="drag-item" id="Server01">Server01</li>
		<li class="drag-item" id="Server02">Server02</li>
		<li class="drag-item" id="Server03">Server03</li>
		<li class="drag-item" id="Server04">Server04</li>
		<li class="drag-item" id="Server05">Server05</li>
		<li class="drag-item" id="Server06">Server06</li>
	</ul>
</body>
</html>